<template>
  <up-popup
    :show="show"
    @close="close"
    mode="center"
    bgColor="transparent"
    :safeAreaInsetBottom="false"
  >
    <view
      class="flex items-center justify-center flex-col w-[520rpx] py-[36rpx] border border-[#B51A26] rounded-[24rpx] text-white bg-[#000]"
    >
      <view class="text-[30rpx] text-center">{{ title }}</view>
      <view class="mt-[24rpx] text-[26rpx]">
        <slot></slot>
      </view>
      <view class="flex items-center justify-between mt-[40rpx]">
        <view class="mr-[30rpx] grayscale">
          <MyButton text="取消" @click="cancel" />
        </view>
        <view>
          <MyButton text="确定" @click="comfirm" />
        </view>
      </view>
    </view>
  </up-popup>
</template>

<script setup>
import MyButton from "@/components/MyButton.vue";
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
});
const emit = defineEmits(["close", "comfirm", "cancel"]);
const close = () => {
  emit("close");
};
const comfirm = () => {
  emit("comfirm");
};
const cancel = () => {
  emit("cancel");
};
</script>

<style lang="scss" scoped></style>
